<template>
  <u-notify ref="uNotify"/>
  <view class="height-vh-100 d-flex align-center justify-center">
    <view class="pa-6 d-flex align-center flex-column">
      <button
          :disabled="loading"
          class="login-button"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
      >
        <u-icon
            name="weixin-fill"
            color="#15b628"
            size="40"
        />
      </button>
      <view class="title">微信登录</view>
    </view>
  </view>
</template>

<script>
import {LoginApi} from "@/api/login";
import {useUserStore} from "@/stores/modulers/user";

export default {
  data() {
    return {
      loading: false,
      show: false
    }
  },
  methods: {
    async getPhoneNumber(e) {
      const api = new LoginApi();
      const userStore = useUserStore();
      if (!e.detail.iv) {
        return false
      }
      this.loading = true
      const loginRes = await uni.login({provider: "weixin"});
      const res = await api.login({code: loginRes.code, signature: e.detail.signature, encryptedData: e.detail.encryptedData, iv: e.detail.iv});
      if (res.ok) {
        userStore.setUser(res.data);
        this.show = true
        this.$refs.uNotify.show({
          message: "登陆成功"
        });
        setTimeout(() => {
          uni.switchTab({
            url:'/pages/index/index'
          })
        }, 1000)
      }
      this.loading = false
    }
  }
}

</script>

<style scoped lang="scss">
.title {
  margin-top: 16px;
  font-size: 14px;
}

.login-button {
  background: rgba(21, 182, 40, 0.3) !important;
  padding: 8px;
  border-radius: 100%;

  &:after {
    border: none;
  }

  &:active {
    background: rgba(21, 182, 40, 0.4) !important;
  }
}

</style>
